import React from 'react';
import {
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
    Stack,
    IconButton,
    Tooltip,
    Typography
} from '@mui/material';
import {
    Edit as EditIcon,
    Delete as DeleteIcon,
    DataArray as GenerateIcon
} from '@mui/icons-material';

const ConfigurationList = ({ configurations, onGenerateData, onDelete, onEdit }) => {
    return (
        <TableContainer>
            <Table sx={{ 
                minWidth: 650,
                '& .MuiTableCell-root': { 
                    fontSize: '0.95rem',
                    borderBottom: '1px solid rgba(224, 224, 224, 0.5)'
                },
                '& .MuiTableRow-root:hover': {
                    backgroundColor: 'rgba(0, 0, 0, 0.04)'
                }
            }}>
                <TableHead>
                    <TableRow sx={{ 
                        backgroundColor: 'primary.main',
                        '& .MuiTableCell-root': { 
                            color: 'white',
                            fontWeight: 'bold'
                        }
                    }}>
                        <TableCell>配置名称</TableCell>
                        <TableCell>描述</TableCell>
                        <TableCell align="center">字段数量</TableCell>
                        <TableCell align="center">生成数量</TableCell>
                        <TableCell align="center">操作</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {configurations.length === 0 ? (
                        <TableRow>
                            <TableCell colSpan={5} align="center" sx={{ py: 4 }}>
                                <Typography color="textSecondary">
                                    暂无配置数据，请添加新配置
                                </Typography>
                            </TableCell>
                        </TableRow>
                    ) : (
                        configurations.map((config) => (
                            <TableRow key={config.id}>
                                <TableCell>
                                    <Typography variant="subtitle1" color="primary">
                                        {config.configName}
                                    </Typography>
                                </TableCell>
                                <TableCell>{config.description}</TableCell>
                                <TableCell align="center">
                                    <Typography 
                                        variant="body2" 
                                        sx={{ 
                                            bgcolor: 'primary.main', 
                                            color: 'white',
                                            py: 0.5,
                                            px: 1,
                                            borderRadius: 1,
                                            display: 'inline-block'
                                        }}
                                    >
                                        {config.fields?.length || 0} 个字段
                                    </Typography>
                                </TableCell>
                                <TableCell align="center">
                                    <Typography 
                                        variant="body2" 
                                        sx={{ 
                                            bgcolor: 'secondary.main', 
                                            color: 'white',
                                            py: 0.5,
                                            px: 1,
                                            borderRadius: 1,
                                            display: 'inline-block'
                                        }}
                                    >
                                        {config.dataCount} 条
                                    </Typography>
                                </TableCell>
                                <TableCell>
                                    <Stack direction="row" spacing={1} justifyContent="center">
                                        <Tooltip title="生成数据">
                                            <IconButton 
                                                color="primary"
                                                onClick={() => onGenerateData(config.id)}
                                            >
                                                <GenerateIcon />
                                            </IconButton>
                                        </Tooltip>
                                        <Tooltip title="编辑配置">
                                            <IconButton 
                                                color="info"
                                                onClick={() => onEdit(config)}
                                            >
                                                <EditIcon />
                                            </IconButton>
                                        </Tooltip>
                                        <Tooltip title="删除配置">
                                            <IconButton 
                                                color="error"
                                                onClick={() => onDelete(config.id)}
                                            >
                                                <DeleteIcon />
                                            </IconButton>
                                        </Tooltip>
                                    </Stack>
                                </TableCell>
                            </TableRow>
                        ))
                    )}
                </TableBody>
            </Table>
        </TableContainer>
    );
};

export default ConfigurationList; 